Rodrigo

Hi, I believe the issue starts with the first error you have in the console there, then it kinds of dominoes in the wrong way with ScrollTrigger somehow. Without a minimal demo that clearly illustrates the issue, there is not a lot we can do I'm afraid. I haven't seen any issue like that when deploying to Netlify react/next and vue/nuxt apps before, so I couldn't tell you what the issue is 🤷‍♂️ Sorry I can't be of more assistance 😞 Happy Tweening!

Hi, Use autoAlpha instead of opacity: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#autoalpha Hopefully this helps. Happy Tweening!

Hi, I think you should simplify your approach a little bit, get the animation with ScrollTrigger working first and then add snapping to the mix. I recommend you to have a look at this threads in order to better grasp the stacking card concept: Hopefully this helps. Happy Tweening!

Hi, That demo uses ScrollTrigger's observe which has been ported into the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ Here are a couple of demos that show how to integrate ScrollTrigger and Observer: https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL Hopefully this helps. Happy Tweening!

Sorry about the issues but without a minimal demo that clearly illustrates the problem there is not a lot we can do. The only thing I can see in your code is that you have the isTweening boolean commented out in your onUp and onDown callbacks, so that will definitely won't work: // let isTweening = false; // console.log(isTweening); // Observer For Timeline Observer.create({ type: "wheel, touch, pointer, touchmove", target: window, preventDefault: true, wheelSpeed: -1, tolerance: 100, dragMinimum: window.innerWidth >= 480 ? 100 : 20, onUp: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() < 1) { mastertl.play(); } }, onDown: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() <= 1) { mastertl.reverse(); } }, }); Sorry I can't be of more assistance. Happy Tweening!

Hi @AntonioNB4, You could try the dragClickables config option in the Draggable instance created in the helper function: https://gsap.com/docs/v3/Plugins/Draggable/#dragClickables Hopefully this helps. Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/dyEyRLG Hopefully this helps. Happy Tweening!

Honestly I couldn't tell you. There must be something in your HTML/CSS, but unfortunately we don't have the time resources to go through the HTML structure and styles and find what could be causing this in your setup, as you can see in this demo: https://codepen.io/GreenSock/pen/MWzeJow Take a look at it and see the differences and how everything works in order to find the problem in your setup. Happy Tweening!

Yeah, there is a bunch of huge SVG elements with filters and when you do that performance is out the window. I remember talking to the owner and project manager about going with WebGL but the designs were already made in SVG and paid so there was no turning back from that. At the end some things were made in order to improve performance a bit, but yeah is no bueno 😬. At the end we're paid to do what the client wants to do, even if the result is like this, not to convince clients about the best approach, so the moral of the story is: "The client is right even when is wrong" 🤷‍♂️ Great to hear that you were able to solve your issues 🥳 Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/xxNxdaz Hopefully this helps. Happy Tweening!

Hi, Maybe something like this: https://stackblitz.com/edit/stackblitz-starters-buk8sw?file=app%2Fpage.tsx Hopefully this helps. Happy Tweening!

Hi, Without a minimal demo is really hard to get a clear idea of what you're trying to do, but ScrollTrigger has the capacity to pin elements, so you should definitely explore that, since it would be far simpler than the approach you have right now: pin Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element. Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element. Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly. Check the ScrollTrigger docs for more information: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#config-object Finally we have a collection of demos in codepen that should help you get ideas and examples : https://codepen.io/collection/AEbkkJ Hopefully this helps. Happy Tweening!

Hi, I would always try to keep the animations for each component inside the component. Often is said as a best practice in React that a component should do just one thing, so I'm not really into the approach of having a component handling animations of elements that are not rendered by that component. I have a couple of code bases but those are protected by NDAs so I can't share them. One is this: https://wiredave.com/artificial-intelligence That's GSAP & Next(12), the project manager always talked about moving away to Nuxt for several reasons I won't share here but it seems they're still using Next. Every section in that site, regardless how small and simple it is, is a component and the animation resides inside the component and you can see that there is no lag, FOUC or any other issue with the initial load. There is no real gain in terms of creating a number of GSAP instances rather than just one, unless you create thousands of them at the same time, which rarely is the case. Also is always better to make your files more concise and smaller in order to make maintenance easier down the road. In 3 to 6 months or perhaps a few years down the road, it'll be far easier to decipher what you're doing in a smaller file rather than a large one. Those are my two cents on the subject. Hopefully this helps. Happy Tweening!

Hi, Sorry to hear about the issues, but the demo is working as expected, so definitely is not a GSAP related issue. Most likely something else in your setup (CSS most likely) is interfering with this, so you'll have to look for that. Also keep in mind that the particular demo that was linked is using this stylesheet as well: https://codepen.io/GreenSock/pen/xxmzBrw.css Maybe the styles you're missing are there. Hopefully this helps. Happy Tweening!

Hi, Two things. First, proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down. Here is how it works: const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect(): useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices. We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/ Two, you have this on your setup: onUpdate: (self) => { const progress = self.progress; const index = Math.floor(progress * images.length); // HERE setCurrentPrayerIndex(index); gsap.set(`#image-${currentPrayerIndex}`, { rotation: 0, scale: 1, zIndex: prayers.length, }); // Reset rotation, scale, and z-index }, The onUpdate callback of a ScrollTrigger instance is going to fire everytime the scroll position is updated. Do you really want to update the state of your component everytime the user scrolls? On top of that since that state property you're updating is on the useEffect hook and you're not doing proper cleanup, the GSAP Timeline is being created again and again and again, so everytime the user scrolls you have more and more GSAP Timelines and ScrollTrigger instances, which is a memory leak. I would strongly recommend you to not use ScrollTrigger for now, just focus on creating the animation. Once the animation is working the way you intend, then you can add ScrollTrigger back into the mix. Also take a look at the useGSAP hook and the article link I shared in order to bbetter understand how things are wired up when using GSAP in a react app. Happy Tweening!